<template>
	<view class="empower">
		<view class="login-wrapper">
			<view class="title">授权申请</view>
			<image src="/static/logo.png" mode="aspectFill" class="image"></image>
			<view class="tips1">我的总台申请获取以下权限</view>
			<view class="tips2">
				<text style="margin-right: 10rpx;">·</text>
				<text v-if="state == 1">获取你的公开信息(昵称，头像等)</text>
				<text v-if="state == 2">获取你的手机电话</text>

				<view class="conceal">
					<view class="" style="margin-top: 6rpx;">
						<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange"
							shape="circle" size="12" activeColor="rgb(255,137,0)">
							<u-checkbox name="true"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="" style="width:520rpx;">
						点击同意即表示您已阅读并同意<text class="text-color" @click.stop="handleConceal">《服务协议》</text>与<text
							class="text-color" @click.stop="handleConceal">《隐私政策》</text>
					</view>
				</view>
			</view>

			<view class="button">
				<!-- <view class="cancel" @click="handleCancel">拒绝</view> -->
				<view class="getUserInfo" v-if="state == 1" @tap="getUserInfo">允许</view>
				<view class="getUserInfo" v-if="state == 2">
					<view class="getUserInfo-view">
						<u-loading-icon mode="circle" color="#49C265" :size="20" v-if="getPhoneLoading">
						</u-loading-icon>
						<text v-else>允许</text>
					</view>
					<button class="getPhoneNumber" v-if="checkboxValue1.length" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">获取手机号</button>
					<button class="getPhoneNumber" v-else @click="handleTips">获取手机号</button>
				</view>
			</view>
		</view>
		<conceal :showButtom="true" v-if="showConceal" @cancel="handleConcalCancel" @submit="handleConcalSubmit">
		</conceal>
	</view>
</template>
<script>
	import conceal from "@/components/conceal/index.vue";
	import {
		getPhone,
		login
	} from "@/http"
	export default {
		name: "Empower",
		components: {
			conceal
		},
		data() {
			return {
				state: 2, // 1微信授权 2获取手机号
				getPhoneLoading: false,
				showConceal: false,
				checkboxValue1: []
			}
		},
		methods: {
			handleConcalSubmit() {
				this.checkboxValue1 = ["true"];
				this.showConceal = false;
			},
			handleConcalCancel() {
				this.checkboxValue1 = [];
				this.showConceal = false;
			},
			handleConceal() { // 用户协议
				this.showConceal = true;
			},
			handleCancel() { //拒绝
				this.state = 2;
				this.getPhoneLoading = false;
				uni.setStorageSync('userInfo', '');
				this.$emit("cancel");
			},
			checkboxChange(e) {

			},
			async getPhoneNumber(e) {
				try {
					this.getPhoneLoading = true;
					if (!e.detail.code) return this.handleCancel();
					// let _res = await login();
					// console.log('授权弹框查看内容：',_res)
					getPhone({
						code: e.detail.code,
						openid: uni.getStorageSync('openid')
					}).then(res => {
						this.getPhoneLoading = false;
						let userInfo = {
							avatarUrl: "",
							city: "",
							country: "",
							gender: 0,
							language: "zh_CN",
							nickName: "微信用户",
							province: "",
						};
						userInfo.phone = res.data.data.phone;
						uni.setStorageSync('power', res.data.data.limit);
						uni.setStorageSync('phone', res.data.data.phone);
						uni.setStorageSync('userInfo', userInfo);
						uni.setStorageSync('Authorization', res.data.data.token);
						this.$emit("login-success");
						this.state = 1;
					});
				} catch (err) {
					console.log('错误信息',err)
					this.getPhoneLoading = false;
				}
			},
			getUserInfo() {
				uni.getUserProfile({
					desc: '用于完善会员资料',
					lang: 'zh_CN',
					success: (infoRes) => {
						uni.setStorageSync('userInfo', infoRes.userInfo)
						this.state = 2
					},
					fail(res) {
					}
				})
			},
			handleTips() {
				uni.showToast({
					title: "请同意《服务协议》和《隐私政策》",
					icon: "none"
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.conceal {
		display: flex;
		margin-top: 18rpx;
	}

	.text-color {
		color: rgb(211, 2, 1);
	}

	.empower {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999999999;
	}

	.login-wrapper {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 620rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		overflow: hidden;

		.title {
			font-size: 34rpx;
			color: #1F1F1F;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			border-bottom: 1px solid #EEEEEE;
		}

		.button {
			display: flex;
			border-top: 1px solid #EEEEEE;
			margin-top: 40rpx;

			.cancel,
			.getUserInfo {
				flex: 1;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				font-size: 34rpx;
				color: #1F1F1F;
			}

			.getUserInfo {
				color: #49C265;
				border-left: 1px solid #EEEEEE;
				position: relative;

				.getPhoneNumber {
					position: absolute;
					background-color: red;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					opacity: 0;
				}

				.getUserInfo-view {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					width: 100%;
				}
			}

		}

		.tips1 {
			font-size: 30rpx;
			color: #1F1F1F;
			margin-left: 32rpx;
		}

		.tips2 {
			font-size: 28rpx;
			color: #878787;
			margin-top: 57rpx;
			margin-left: 32rpx;
		}

		.image {
			display: block;
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			margin: 0 auto;
			margin-top: 32rpx;
			margin-bottom: 32rpx;
			overflow: hidden;
		}
	}
</style>
